<template>
	<view class="canvas">
		<view class="canvas__title">
			请在下方区域内书写姓名
		</view>
		<view class="canvas__clear" @click="clearCanvas">
			<image src="@/static/img/canvas/Frame.png" style="width: 20rpx; margin-right: 6rpx;" mode="widthFix">
			</image> 重写
		</view>
		<canvas style="width: 100%;height: 100%;" @touchstart.stop="start" canvas-id="canvas" @touchmove.stop="move"
			@touchcancel.stop="end" @touchend.stop="end" id="canvas"></canvas>
	</view>
</template>

<script>
	import {
		meetSignatureDel,
		meetSignAdd
	} from "@/api/autograph.js"
	import {
		convertBase64UrlToBlob
	} from "@/utils/base64ToBlob.js"
	import {
		meetSignatureUpload,
		meetSignatureAdd
	} from "@/api/autograph.js"
	export default {
		props:{
			meet_id:{
				type:String
			},
      type_sigin:{
        type:String|Number
        //判断 2 是手写签到页面   1是从扫码签到页面跳转过来的
      }
		},
		data() {
			return {
				changeCanvas: false,
				myCanvas: "",
				ctx: "",
				lastX: "",
				lastY: "",
				isMouseMove: false
			}
		},
		mounted() {
			document.body.addEventListener('touchmove', function(e) {
				e.preventDefault();
			}, {
				passive: false
			});
			this.ctx = uni.createCanvasContext("canvas", this); //创建绘图对象

			// this.;

		},
		methods: {
			getRect(selector) {
				return new Promise((resolve) => {
					let view = uni.createSelectorQuery().select(selector);
					view.fields({
						size: true,
						rect: true,
						scrollOffset: true
					}, (res) => {
						resolve(res);
					}).exec();
				})
			},
			end() {
				this.isMouseMove = false
			},
			move(e) {
				// console.log("开始")
				if (this.isMouseMove) {
					this.drawLine(
						e.touches[0].x,
						e.touches[0].y,
						true
					);
				}
			},
			start(e) {
				// console.log("开始",e,'1111')
				// e.target.preventDefault();
				this.changeCanvas = true;
				this.isMouseMove = true;
				this.drawLine(
					e.touches[0].x,
					e.touches[0].y,
					false
				);
			},
			drawLine(x, y, isT) {
				const {
					ctx
				} = this;
				// ctx.save()
				// console.log(this.lastX,x,y, this.lastY)
				if (isT) {
					// ctx.
					ctx.beginPath();
					ctx.setLineWidth(2); //设置线宽状态
					ctx.setStrokeStyle('black'); //设置线的颜色状态
					ctx.setLineCap('round')
					ctx.setLineJoin("round");
					ctx.moveTo(this.lastX, this.lastY);
					ctx.lineTo(x, y);
					ctx.stroke();
					ctx.draw(true)
					// this.ctx.draw(true);


				}
				// 每次移动都要更新坐标位置
				this.lastX = x;
				this.lastY = y;
			},
			//清空画图
			async clearCanvas() {
				const res = await this.getRect("#canvas")
				console.log(this.ctx, res, "ctx")
				this.ctx.clearRect(0, 0, res.width, res.height)
				this.ctx.draw()
			},
			//保存图片
			async saveImgInfo() {
				if (this.changeCanvas) {


					const [err, res] = await uni.canvasToTempFilePath({
						canvasId: "canvas"
					})
					if (res) {
						let fileBlob = convertBase64UrlToBlob(res.tempFilePath)
						const uploadRes = await meetSignatureUpload({
							file: fileBlob,
							name: "file"
						})
						if (uploadRes.code == 1) {
							const addRes = await meetSignatureAdd({
								files: JSON.stringify(uploadRes.data.files)
							})
							uni.showToast({
								icon: "none",
								title: addRes.msg
							})
							this.clearCanvas()
							console.log(addRes, "addRes")
							if(addRes){
                if(this.type_sigin=='1'){
                  setTimeout(()=>{
                    uni.navigateTo({
                      url: '/pages/signin/signin?meet_id=' + this.meet_id+'&write_name_id='+addRes.data.id
                    });
                  },1000)
                }
                if(this.type_sigin=='2'){
                  const res= await meetSignAdd({
                    meet_id:this.meet_id,
                    qiming_id:addRes.data.id,
                    sign_way:1
                  });
                  uni.showToast({
                    title: res.msg,
                    icon: 'none',
                    duration: 1000
                  });
                  setTimeout(()=>{
                    // uni.navigateTo({
                    //   url: '/pages/tabbar-1-detial/meetingDetails/meetingDetails?id=' + this.meet_id
                    // });
                    uni.navigateBack()
                  },1000)
                }

							}
							return {
								success: true
							}
						}

					}
				} else {
					uni.showToast({
						icon: "none",
						title: "请书写签名"
					})
				}
				console.log(res, "res------")
			},
		}
	}
</script>

<style lang="less" scoped>
	.canvas {
		position: relative;
		margin: 0 auto;
		width: 690rpx;
		height: 524rpx;
		background: #F3F2F7;
		border-radius: 0px 0px 0px 0px;
		opacity: 1;

		&__clear {
			position: absolute;
			right: 30rpx;
			z-index: 10;
			// width: 54rpx;
			text-align: center;
			bottom: 0;
			height: 108rpx;
			line-height: 108rpx;
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #999999;
		}

		&__title {
			height: 108rpx;
			left: 30rpx;
			z-index: 10;
			position: absolute;
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #999999;
			line-height: 108rpx;
		}
	}
</style>
